<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
<script src="../vue.js"></script>
</head>

<body>
<div id="app">

<script>
    Vue.config.productionTip=false;
    const Count=Vue.extend({
        name:"Count",
        data(){
            return{
                count:1,

            };
        },
        template: `
          <div>
            <h1>{{count}}</h1>
            <button @click="count++">累加</button>  
          </div>
        `,
      });
   const Person =Vue.extend({
    name:"Person",
    data(){
        return{
            name:"laowang",
            age:18,
        };
    },
    template:"<span>123</span>",

   });
    /*
        使用Vue.extend方法 返回一个VueComponent构造函数
        当组件使用的时候，会把当前的VueComponent实例化，得到一个组件实例

        注意：
          1. 每次创建一个组件 都会得到一个不同的VueComponent构造函数
      */
      // console.log("Count", Count);
      // console.log("new Count", new Count());
      const vm=new Vue({
        el:"#app",
        components:{
            Count:Count,
        },
        data(){
            return{};

        },
        template: `
        <div>
           <Count />
           <Count />
           <Count />

            </div>
        `,
      });


 </script>
</body>

</html>